<template>
    <div class="page-wrap" v-loading="loading">
        <div class="page-cont">
            <h-section title="申请信息">
                <div>
                    <a-form layout="inline" ref="ruleFormRef" :model="form" :rules="rules">
                        <a-row :gutter="24">
                            <a-col :span="20">
                                <a-form-item label="标题" name="title">
                                    <a-input v-model:value="form.title" placeholder="请输入标题" :maxlength="30" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :span="10">
                                <a-form-item label="重要级别" name="level">
                                    <div style="width: 100%">
                                        <a-select placeholder="请选择" v-model:value="form.level">
                                            <a-select-option v-for="item of dicOptions.changeLevel" :key="item.code">
                                                {{ item.dimensionName }}
                                            </a-select-option>
                                        </a-select>
                                    </div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="10">
                                <a-form-item label="变更类型" name="changeType">
                                    <div style="width: 100%">
                                        <a-select placeholder="请选择" v-model:value="form.changeType">
                                            <a-select-option v-for="item of dicOptions.changeType" :key="item.code">
                                                {{ item.dimensionName }}
                                            </a-select-option>
                                        </a-select>
                                    </div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="20">
                                <a-form-item label="变更内容描述">
                                    <a-textarea placeholder="请输入变更描述" showCount :maxlength="300" auto-size v-model:value="form.changeDescription" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="20">
                                <a-form-item label="变更原因" name="changeReason">
                                    <a-textarea placeholder="请输入变更原因" showCount :maxlength="300" auto-size v-model:value="form.changeReason" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                    <flexbox justify="flex-end" class="btn-group">
                        <a-button @click="handleCancel">取消</a-button>
                        <a-button @click="handleSubmit(1)">暂存</a-button>
                        <a-button type="primary" @click="handleSubmit(2)">发起申请</a-button>
                    </flexbox>
                </div>
            </h-section>
        </div>
    </div>
</template>

<script lang="ts">
import { useRoute, useRouter } from 'vue-router';
import api from '@/api';
import { message } from 'ant-design-vue';
import { defineComponent, ref, unref, reactive, toRefs, getCurrentInstance } from 'vue';
export default defineComponent({
    name: 'CreateRequireChange',
    setup() {
        const route = useRoute();
        const router = useRouter();
        const instance: any = getCurrentInstance();
        const ruleFormRef = ref<any>();
        const rules = {
            title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
            level: [{ required: true, message: '重要级别不能为空', trigger: 'blur' }],
            changeType: [{ required: true, message: '变更类型不能为空', trigger: 'blur' }],
            changeReason: [{ required: true, message: '变更原因不能为空', trigger: 'blur' }]
        };
        const state = reactive<any>({
            loading: false,
            form: {
                id: null,
                instanceId: null,
                system: null,
                title: '', //名称
                level: null, // 重要级别
                changeType: null, //变更类型
                changeDescription: '', //原因
                changeReason: '' //类型
            }
        });
        const getDetailData = async () => {
            const query = {
                id: route.query.id
            };
            const { success, moule } = await api.requireChangeModel.findById(query);
            if (success) {
                Object.keys(state.form).forEach((key) => {
                    state.form[key] = moule[key];
                });
            }
        };
        const handleCancel = () => {
            router.go(-1); // 返回上一个界面
        };
        const handleSubmit = (type: number) => {
            unref(ruleFormRef)
                .validate()
                .then(() => {
                    handleSave(type);
                })
                .catch((err) => {
                    console.log(err);
                });
        };
        const handleSave = async (type: number) => {
            state.loading = true;
            const { name: applyUser, empId: applyUserEmpId, orgList } = instance.proxy.userInfo.employeeDTO;
            // 发送
            const query = {
                ...state.form,
                applyUser,
                applyUserEmpId,
                applyUserDept: orgList[0].name,
                createTime: instance.proxy.$moment().format('YYYY-MM-DD HH:mm:ss')
            };
            // type等于1表示暂存
            const request = type === 1 ? api.requireChangeModel.save : api.requireChangeModel.auditProcess;
            const { success, errorMsg } = await request(query);
            state.loading = false;
            if (success) {
                message.success('保存成功');
                router.push({
                    path: '/requireChange/requireChangeList'
                });
            } else {
                message.error(errorMsg);
            }
        };
        getDetailData();
        return {
            rules,
            ruleFormRef,
            ...toRefs(state),
            handleCancel,
            handleSubmit
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .btn-group {
            margin: 24px 0;
            button + button {
                margin-left: 8px;
            }
        }
    }
}
</style>